<template>
  <el-table
    class="order_tab"
    style="
      width: 930px;
      text-align: center;
      margin-bottom: 30px;
      margin-left: 0px;
    "
    cellspacing="0"
    cellpadding="0"
    :data="tableData"
    height="250"
  >
    <el-table-column prop="name" label="商品名称" width="180">
    </el-table-column>
    <el-table-column
                prop="fileName"
                label="图片"
                width="180">
                     <!-- 图片的显示 -->
                
                 <template    slot-scope="scope" >            
                    <img v-if="scope.row.fileName!=''" :src="fileBaseUrl+scope.row.fileName"  min-width="70" height="70" />
                 </template>      
    </el-table-column>
    <!-- <el-table-column prop="fileName" label="商品图片" width="180"></el-table-column> -->
    <el-table-column prop="quantity" label="数量"> </el-table-column>
    <el-table-column prop="cost" label="价格"> </el-table-column>
  </el-table>
</template>

<script>
export default {
    name:"BackOrderPro",
    props: {
      orderId: {
        type: [Number],
      }
    },
    data() {
      return {
        fileBaseUrl:'http://192.168.79.98:9001/',
        tableData:[]
      }
    },
    methods: {
      getList(orderId){
        this.$axios({
                method:'get',
                url:'/easybuy/products/getListbyOrder',
                params:{
                    orderId
                }
            }).then((rs) => {
              console.log("详情：",rs.data.list)
                this.tableData = rs.data.list
            })
            .catch((rs) => {
                console.log(rs)
                this.$message.error("服务器错误")
            });
      }
    },
    mounted() {
    console.log('订单ID:', this.orderId) // 输出：123
    this.getList(this.orderId)
  }
}
</script>

<style>
</style>